<template>
  <div class="subcommunity-container">
    <div
      class="sub-card"
      v-for="card in cardData"
      :key="'community' + card.communityNo"
      @click="
        toCommunity(
          '/communitycenter?communityno=' + card.communityNo + '&choice=1'
        )
      "
    >
      <div class="community-cover" v-if="card.communityLcon">
        <img :src="card.communityLcon" />
      </div>
      <div class="community-name">
        {{ card.communityName }}
      </div>
      <div class="community-brief">
        {{ card.communitySynopsis }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: ["cardData"],

  components: {},

  computed: {},

  methods: {
    toCommunity(url) {
      this.$router.push(url);
    },
  },
};
</script>
<style>
.subcommunity-container {
  width: 100%;
  background-color: white;
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
  cursor: pointer;
}
.subcommunity-container > .container-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
  padding: 5px 0px 5px 10px;
  position: sticky;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px);
  top: 0%;
}
.sub-card {
  border-top: 1px rgb(240, 240, 240) solid;
  width: calc(100% - 20px);
  padding: 10px;
  max-height: 80px;
  overflow: hidden;
}
.community-cover {
  width: 40px;
  height: 40px;
  float: left;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 18px;
}
.community-cover > img {
  width: 100%;
  height: 100%;
}
.community-name {
  font-size: 15px;
  display: block;
  width: calc(100% - 60px);
  color: rgb(90, 90, 90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-brief {
  display: block;
  width: calc(100% - 60px);
  font-size: 10px;
  color: rgb(208, 208, 208);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>